import * as echarts from "echarts";
// 绘制左侧面
const wid = 18;
const w1 = Math.sin(Math.PI / 6) * wid; //4
const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
const snapHeight = wid / 2;
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - w2, shape.y];
    const c2 = [shape.x - w2, xAxisPoint[1]];
    const c3 = [shape.x, xAxisPoint[1]];
    ctx
      .moveTo(c0[0] - wid, c0[1])
      .lineTo(c1[0] - wid, c1[1])
      .lineTo(c2[0] - wid, c2[1])
      .lineTo(c3[0] - wid, c3[1])
      .closePath();
  },
});
const CubeLeft1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c3 = [shape.x, xAxisPoint[1]];
    const c1 = [shape.x - w2, shape.y];
    const c2 = [shape.x - w2, xAxisPoint[1]];
    ctx
      .moveTo(c0[0] + wid, c0[1])
      .lineTo(c1[0] + wid, c1[1])
      .lineTo(c2[0] + wid, c2[1])
      .lineTo(c3[0] + wid, c3[1])
      .closePath();
  },
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x, xAxisPoint[1]];
    const c3 = [shape.x + w1, xAxisPoint[1] - w2 / 2 + snapHeight];
    const c4 = [shape.x + w1, shape.y - w2 + snapHeight];
    ctx
      .moveTo(c1[0] - wid, c1[1])
      .lineTo(c2[0] - wid, c2[1])
      .lineTo(c3[0] - wid, c3[1])
      .lineTo(c4[0] - wid, c4[1])
      .closePath();
  },
});
// 绘制右侧面
const CubeRight1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x, xAxisPoint[1]];
    const c3 = [shape.x + w1, xAxisPoint[1] - w2 / 2 + snapHeight];
    const c4 = [shape.x + w1, shape.y - w2 + snapHeight];
    ctx
      .moveTo(c1[0] + wid, c1[1])
      .lineTo(c2[0] + wid, c2[1])
      .lineTo(c3[0] + wid, c3[1])
      .lineTo(c4[0] + wid, c4[1])
      .closePath();
  },
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    //
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + w1, shape.y - w2 + snapHeight]; //右点
    const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight];
    const c4 = [shape.x - w2, shape.y];
    ctx
      .moveTo(c1[0] - wid, c1[1])
      .lineTo(c2[0] - wid, c2[1])
      .lineTo(c3[0] - wid, c3[1])
      .lineTo(c4[0] - wid, c4[1])
      .closePath();
  },
});
// 绘制顶面
const CubeTop1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    //
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + w1, shape.y - w2 + snapHeight]; //右点
    const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight];
    const c4 = [shape.x - w2, shape.y];
    ctx
      .moveTo(c1[0] + wid, c1[1])
      .lineTo(c2[0] + wid, c2[1])
      .lineTo(c3[0] + wid, c3[1])
      .lineTo(c4[0] + wid, c4[1])
      .closePath();
  },
});
// 三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);

echarts.graphic.registerShape("CubeLeft1", CubeLeft1);
echarts.graphic.registerShape("CubeRight1", CubeRight1);
echarts.graphic.registerShape("CubeTop1", CubeTop1);

let xData = ["星期一", "星期二", "星期三", "星期四", "星期五"];
let yData = [150, 126, 260, 220, 184];
let yData1 = [120, 156, 240, 120, 184];
export default {
  // backgroundColor: "#000a3f",
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    backgroundColor: "rgba(9, 24, 48, 0.5)",
    borderColor: "rgba(75, 253, 238, 0.4)",
    textStyle: {
      color: "#CFE3FC",
    },
    formatter: "{a0}: {c0} 个<br />{a1}: {c1} 个",
    borderWidth: 1,
  },
  leaged: {
    show: true,
    // type: "plain",
    top: "20%",
    right: "5%",
  },
  grid: {
    top: "20%",
    left: "5%",
    bottom: "5%",
    right: "5%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: xData,
    axisLine: {
      show: true,
      lineStyle: {
        color: "#3e6f8e",
        width: 1,
      },
    },
    axisTick: {
      show: false,
      length: 9,
      alignWithLabel: false,
      lineStyle: {
        color: "#AAA",
      },
    },
    axisLabel: {
      fontSize: 14,
      margin: 10,
      color: "white",
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: "#ffffff",
        opacity: 0.2,
        width: 1,
      },
    },
  },
  yAxis: {
    name: "舆情数量",
    type: "value",
    nameTextStyle: {
      color: "white",
      fontSize: 16,
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "#3e6f8e",
        width: 1,
      },
    },
    axiosTick: {
      show: false,
    },
    axisLabel: {
      color: "white",
      fontSize: 14,
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: "#ffffff",
        opacity: 0.2,
        width: 1,
      },
    },
    nameGap: 20,
  },
  series: [
    {
      name: "正面",
      type: "bar",
      label: {
        show: true,
        position: "top",
        fontSize: 16,
        color: "#fff",
        offset: [0, -10],
      },
      tooltip: {
        show: false,
      },
      itemStyle: {
        color: "transparent",
      },
      data: yData,
    },
    {
      name: "正面",
      type: "custom",
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        location[0] = location[0] + wid * 0;
        const xlocation = api.coord([api.value(0), 0]);
        xlocation[0] = xlocation[0] + wid * 0;
        return {
          type: "group",
          children: [
            {
              type: "CubeLeft",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: xlocation,
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(62,255,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,126,191,1)",
                  },
                ]),
              },
            },
            {
              type: "CubeRight",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: xlocation,
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(23,176,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,138,255,0.3)",
                  },
                ]),
              },
            },
            {
              type: "CubeTop",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: xlocation,
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(163,232,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(163,232,255,1)",
                  },
                ]),
              },
            },
          ],
        };
      },
      color: "blue",
      data: yData,
    },
    {
      name: "负面",
      type: "bar",
      label: {
        show: true,
        position: "top",
        fontSize: 16,
        color: "#fff",
        offset: [0, -10],
      },
      tooltip: {
        show: false,
      },
      itemStyle: {
        color: "transparent",
      },
      data: yData1,
    },
    {
      name: "负面",
      type: "custom",
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        location[0] = location[0] + wid * 0;
        const xlocation = api.coord([api.value(0), 0]);
        xlocation[0] = xlocation[0] + wid * 0;
        return {
          type: "group",
          children: [
            {
              type: "CubeLeft1",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: xlocation,
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(139, 62, 27,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(139, 62, 27,0.3)",
                  },
                ]),
              },
            },
            {
              type: "CubeRight1",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: xlocation,
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(139, 62, 27,1  )",
                  },
                  {
                    offset: 1,
                    color: "rgba(139, 62, 27,0.3)",
                  },
                ]),
              },
            },
            {
              type: "CubeTop1",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: xlocation,
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(255,217,217,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255,217,217,0.7)",
                  },
                ]),
              },
            },
          ],
        };
      },
      color: "blue",
      data: yData1,
    },
    {
      // yAxisIndex: 1,
      offset: [0, -10],
      type: "line",
      data: yData,
      name: "正面",
      barWidth: 50,
      label: {
        show: false,
        position: "top",
        color: "#FFF",
        fontSize: "14px",
      },
      color: "#01a4ce",
    },
  ],
};
